<template>
  <div class="pages newServices">
    <div class="pageLevel">
      <div class="from_main1">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="110px">
          <el-form-item label-width='25px' style='margin-bottom: 20px;border-bottom: 1px dashed #ccc;width: 100%'>
            <h3 class="jichu">基础信息</h3>
          </el-form-item>
          <div class="addT">
            <el-row>
              <el-col :span="24">
                <el-form-item label="服务名称" prop="sername">
                  <el-input v-model="ruleForm.sername" size="small" maxlength="30" clearable placeholder="如：宝宝游泳抚触 "></el-input>
                  <span>(4～30字)</span>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="服务时长" prop="sertime">
                  <el-input v-model="ruleForm.sertime" size="small" clearable placeholder="正整数" minlength="1" maxlength="8" style='width: 200px'></el-input>
                  <span>(分钟)</span>
                </el-form-item>
                <el-form-item label-width='20px'>
                  <el-checkbox v-model="ruleForm.useTime" :true-label='1' :false-label='0'>不占用技师时间</el-checkbox>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="销售单价" prop="serdan">
                  <el-input v-model="ruleForm.serdan" size="small" clearable placeholder="在此输入单价，保留两位小数"></el-input>
                  <span>元</span>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="会员价" prop="sermen">
                  <el-input v-model="ruleForm.sermen" size="small" clearable placeholder="在此输入会员价，保留两位小数"></el-input>
                  <span>元</span>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="营业员提成" prop="serticheng">
                  <el-radio-group v-model="ruleForm.serticheng" @change="baigu">
                    <el-radio label="0">按百分比</el-radio>
                    <el-radio label="1">按固定金额</el-radio>
                  </el-radio-group>
                  <template>
                    <div v-show="isbai">
                      <el-form-item label="" prop="sermoey">
                        <el-input size="small" v-model="ruleForm.sermoey" placeholder="正数，保留小数点后两位"></el-input>
                        <span>%</span>
                      </el-form-item>
                    </div>
                    <div v-show="isgu">
                      <el-form-item label="" prop="sermoey1">
                        <span>￥</span>
                        <el-input size="small" v-model="ruleForm.sermoey1" placeholder="正数，保留小数点后两位" maxlength="8"></el-input>
                      </el-form-item>
                    </div>
                  </template>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="状态" prop="serstatus">
                  <el-radio-group v-model="ruleForm.serstatus">
                    <el-radio label="0">上架</el-radio>
                    <el-radio label="1">下架</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
          <div style="width:500px;padding-left: 110px;padding-bottom: 100px">
            <el-button type="primary" @click="submitForm('ruleForm')" class="Determine">保 存</el-button>
            <el-button @click="resetForm('ruleForm')">取 消</el-button>
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";
import { saveOrUpdateService, serviceDetail } from "@/api";
import u from "@/util";
export default {
  name: "editor",
  computed: mapState(["sub", "power", "merchantId", "linkName", "mobile"]),
  data() {
    var newReg1 = (rule, value, callback) => {
      if (value == -1) {
        callback();
      }

      if (parseInt(this.ruleForm.age1) > parseInt(value)) {
        callback(new Error("起始年龄不能大于结束年龄"));
      } else {
        callback();
      }
    };
    var limitSermen = (rule, value, callback) => {
      if (parseInt(value) > parseInt(this.ruleForm.serdan)) {
        callback(new Error("会员价不能大于销售单价"));
      } else {
        callback();
      }
    };
    var limitSerdan = (rule, value, callback) => {
      if (parseInt(value) < parseInt(this.ruleForm.sermen)) {
        callback(new Error("会员价不能大于销售单价"));
      } else {
        callback();
      }
    };
    var limitEffeteLength = (rule, value, callback) => {
      if (value.length > 60 || value.length < 4) {
        callback(new Error("请输入长度在4~60个字之间"));
      } else {
        callback();
      }
    };
    var limitPositionLength = (rule, value, callback) => {
      if (value.length > 20 || value.length < 2) {
        callback(new Error("请输入长度在2~20个字之间"));
      } else {
        callback();
      }
    };
    return {
      managementType: [], //门店经营类型列表
      uploadFile: "",
      isgu: false,
      editorContent: "",
      isbai: true,
      id: "",
      checked: false,
      news: "",
      //多图
      // dialogVisible: false,
      fileList2: [
        {
          name: "",
          url: ""
        }
      ],
      textarea: "",
      index: "",
      row: {},
      tableDataBegin: "",
      radio: "1",
      ruleForm: {
        dialogImageUrl: "",
        thumbnailImageUrl: "",
        sername: "",
        sertime: "",
        type: "",
        serdan: "",
        sermen: "",
        serticheng: "0",
        sermoey: "",
        sermoey1: "",
        serstatus: "0",
        age1: "",
        useTime: 0 //是否占用时间
      },
      chankangDetail: {
        notes: "",
        editorContent: ""
      },
      swimDetail: {
        notes: "",
        editorContent: ""
      },
      create: false,
      rules: {
        sername: [
          { required: true, message: "请输入服务名称", trigger: "blur" },
          {
            min: 4,
            max: 30,
            message: "长度在 4 到 30 个字符",
            trigger: "blur"
          },
          { validator: u.valida, trigger: "blur" }
        ],
        sermoey: [
          { validator: u.checkSpace, trigger: "blur" },
          { validator: u.validatenum, trigger: "blur" }
        ],
        sermoey1: [
          { validator: u.checkSpace, trigger: "blur" },
          { validator: u.validatenum1, trigger: "blur" }
        ],
        sertime: [
          {
            required: true,
            message: "请输入服务时长",
            trigger: "blur"
          },
          {
            validator: u.valida,
            trigger: "blur"
          },
          {
            validator: u.numall,
            trigger: "blur"
          }
        ],
        type: [
          { required: true, message: "请输入服务类型", trigger: "blur" },
          { min: 1, max: 6, message: "长度在 1 到 6 个字符", trigger: "blur" }
        ],
        serdan: [
          {
            required: true,
            message: "请输入销售单价",
            trigger: "blur"
          },
          {
            validator: u.valida,
            trigger: "blur"
          },
          {
            validator: u.validateOperatingArea,
            trigger: "blur"
          },
          {
            validator: u.validatenum1,
            trigger: "blur"
          },
          {
            validator: limitSerdan, // 会员价不大于销售单价
            trigger: "blur"
          }
        ],
        sermen: [
          {
            required: true,
            message: "请输入会员价",
            trigger: "blur"
          },
          {
            validator: u.valida,
            trigger: "blur"
          },
          {
            validator: u.validateOperatingArea,
            trigger: "blur"
          },
          {
            validator: u.validatenum1,
            trigger: "blur"
          },
          {
            validator: limitSermen, // 会员价不大于销售价格
            trigger: "blur"
          }
        ],
        serticheng: [
          {
            required: false,
            message: "请输入会员价",
            trigger: "blur"
          }
        ],
        serstatus: [
          {
            required: true,
            message: "请选择状态",
            trigger: "blur"
          }
        ]
      }
    };
  },
  mounted() {
    this.showTab = u.getQuery("showTab");
    if (this.showTab == "2") {
      this.serdetail();
    }
  },
  methods: {
    serdetail() {
      let data = {
        id: u.getQuery().id
      };
      serviceDetail(data).then(res => {
        this.ruleForm.sername = res.data.name; // 服务名称
        this.ruleForm.sertime = res.data.serviceTime; // 服务时长
        this.ruleForm.serdan = res.data.price.toString(); // 销售价
        this.ruleForm.sermen = res.data.memberPrice.toString(); // 会员价
        this.ruleForm.serticheng = res.data.deductType.toString(); // 提成类型
        if (res.data.deductType == 0) {
          this.isbai = true;
          this.isgu = false;
          this.ruleForm.sermoey = res.data.deductAmount.toString();
        } else if (res.data.deductType == 1) {
          this.isbai = false;
          this.isgu = true;
          this.ruleForm.sermoey1 = res.data.deductAmount.toString();
        }
        this.ruleForm.serstatus = res.data.status.toString(); // 上下架状态
        this.ruleForm.useTime = (+res.data.useTime)//是否占用技师时间
        if (this.ruleForm.managementTypeId == 1) {
          this.isChanKang = true;
        } else {
          this.isChanKang = false;
        }
      });
    },
    // 营业员提成切换
    baigu(val) {
      if (val == "0") {
        this.isbai = true;
        this.isgu = false;
      }
      if (val == "1") {
        this.isbai = false;
        this.isgu = true;
      }
    },
    // 提交表单
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          if (+this.ruleForm.serdan < +this.ruleForm.sermen) {
            this.$message.error("会员价格不能大于销售单价");
            return;
          } else {
            this.getContent();
          }
        } else {
          return false;
        }
      });
    },
    getContent() {
      let data = {
        companyId: this.merchantId, //公司id
        name: this.ruleForm.sername, //服务名称
        serviceTime: this.ruleForm.sertime, //服务时长
        price: this.ruleForm.serdan, //销售价
        memberPrice: this.ruleForm.sermen, //会员价
        useTime: this.ruleForm.useTime, //是否占用时间
        deductType: this.ruleForm.serticheng, //提成类型
        state: this.ruleForm.serstatus //状态
      };
      if (this.ruleForm.serticheng == 0) {
        Object.assign(data, {
          deductAmount: this.ruleForm.sermoey //提成额
        });
      } else if (this.ruleForm.serticheng == 1) {
        Object.assign(data, {
          deductAmount: this.ruleForm.sermoey1 //提成额
        });
      }
      if (this.showTab == 2) {
        Object.assign(data, {
          id: u.getQuery().id
        });
      }
      saveOrUpdateService(data).then(res => {
        if (res.code == 200) {
          this.$message.success(res.msg);
          history.back();
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    // 重置表单
    resetForm(formName) {
      this.$refs[formName].resetFields();
      history.back();
    }
  }
};
</script>
<style scoped>
.from_main1 .el-form-item {
  float: left;
}
.from_main1 .el-input {
  width: 350px;
}
.from_main1 .line {
  border-top: 1px dashed #ccc;
}
.from_main1 .line .el-form-item {
  margin-top: 12px;
  margin-bottom: 10px;
}
.from_main1 .jichu {
  color: #444;
}
.from_main1 span {
  font-size: 13px;
  color: #444;
}
.el-col-block {
  background: #fff;
  margin-left: 110px;
  padding: 15px;
  margin-bottom: 20px;
}
.el-col-block .el-button-bot {
  margin-bottom: 15px;
}
</style>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.el-message-box {
  z-index: 9999;
}
#editorElem {
  z-index: -1;
}
.table-service th,
.table-service td {
  padding: 6px 0 !important;
}
</style>
<style scoped>
* {
  box-sizing: border-box;
}
.bottom {
  width: 100%;
  margin-top: 10px;
}
.replace {
  float: left;
  width: 50%;
  height: 20px;
  text-align: center;
  line-height: 20px;
  position: relative;
  overflow: hidden;
}
.replace div {
  position: absolute;
  width: 100%;
  height: 20px;
  text-align: center;
  line-height: 20px;
}
.replace input {
  position: absolute;
  opacity: 0;
  width: 100%;
  left: 0;
}
.delete {
  float: left;
  width: 50%;
  height: 20px;
  text-align: center;
  line-height: 20px;
}
</style>
